<template>
	<view>
		<view class="job-dtl-box">
			<view class="common-tips-box">
				<view class="t1">职位升级</view>
				<view class="t2">职位升级后，将登顶同类职位榜首，增强曝光度；同时获得岗位专属标记（高效、急聘）</view>
			</view>
			<view class="position-promotion">
				<view :key="index" @click="handleSelect" :data-gid='index' v-for="(item, index) in positionPromotionList"
				 :data-default="item.limitedText" :class="{'info-item-wrap': true, 'default': index === selectIndex,  'select': index === selectIndex}">
					<view class="info-item">
						<view class="text-center">
							<view class="name">
								{{ item.name }}
							</view>
							<view class="bold discount-price">
								￥{{ item.amounts }}
							</view>
							<view class="bold price line-through">
								￥{{ item.oldAmounts }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="date-selector-wrap">
				<view class="date-selector-container">
					<view class="date-selector-trigger">
						<text class="bold">升级日期</text>
						<text @click="handleDateTrigger" class="gray trigger">
							{{ selectorPlaceholder }}<text class="iconfontPT iconxiayibu"></text>
						</text>
					</view>
					<view class="date-selector" v-if="showDateSelector">
						<view class="mask" @click="handleDateTrigger"></view>
						<view class="content">
							<view class="header flex-x-between">
								<text class="bold">
									选择升级日期
								</text>
								<text @click="handleConfirm">
									确认
								</text>
							</view>
							<view class="body">
								<view class="date-header">
									<text class="gray" v-for="(item, index) in dateSelectorHeader" :key="index">{{item}}</text>
								</view>
								<view class="date-body">
									<text :key="index" :data-gid='index' @click="handleDateSelect" :class="{'day-item': true, 'select': item.checked}"
									 v-for="(item, index) in dateSelectorBody">{{item.key}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="discription">
				<view class="discription-item-wrap">
					<view class="relative discription-item">一天按24小时记<text class="theme">（例：付款时间为13:10，到期时间则为第二天14:00）</text>；</view>
					<view class="relative discription-item">为了保证效果，在升级持续时间，无法再次升级；</view>
					<view class="relative discription-item">购买成功后，职位讲在小程序
						<text class="theme">置顶展示</text>
						，不同城市/职位实际曝光量，随竞争情况会有所差异；</view>
					<view class="relative discription-item">升级时限到期后，需要续费才能继续获得标识和置顶；</view>
				</view>
			</view>
			<view class="occupying"></view>
			<view class="confirm-warp w100">
				<view class="confirm-box clear-fix">
					<view class="total-box pull-left">
						<view class="total">
							总计：<text style="color: #E41805;" class="bold total-discount-price">￥{{ totalDiscountPrice }}</text>
						</view>
						<view class="price line-through">
							原价：<text class="bold">￥{{ totalPrice }}</text>
						</view>
					</view>
					<button class="confirm-btn pull-right" type="purchase" hover-class="hoverClass" @click="handlePurchase">立即购买</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		setWorkPromotion,
		getPositionPromotionInfo
	} from '../../../apis/recruit/index.js'

	export default {
		data() {
			return {
				id: 0,
				selectIndex: 0,
				totalPrice: '0',
				selectDate: [],
				showDateSelector: false,
				totalDiscountPrice: '0',
				selectorPlaceholder: '请选择',
				dateSelectorHeader: [
					"日",
					"一",
					"二",
					"三",
					"四",
					"五",
					"六",
				],
				dateSelectorBody: [],
				checkedPositionPromotion: {},
				positionPromotionList: [],
			}
		},
		onLoad(options) {
			this.id = options.id

			this.getData()
			this.generateDateSelectorData()
		},
		methods: {
			//初始化获取数据
			initDataFn() {
				const {
					positionPromotionList
				} = this

				const {
					oldAmounts,
					amounts,
					name
				} = positionPromotionList[0]

				let checkedPositionPromotion = {
					name,
					currentPrice: oldAmounts,
					currentDiscountPrice: amounts
				}

				this.totalPrice = oldAmounts
				this.totalDiscountPrice = amounts
				this.checkedPositionPromotion = checkedPositionPromotion

			},
			getData() {
				getPositionPromotionInfo().then(res => {
					if (res.code == 1) {
						this.positionPromotionList = res.data.list.company,

							this.initDataFn();
					}
				})
			},
			handleConfirm() {
				const {
					dateSelectorBody,
					checkedPositionPromotion
				} = this;

				const {
					currentPrice,
					currentDiscountPrice
				} = checkedPositionPromotion

				let str = '',
					selectDate = dateSelectorBody.filter(item => item.checked && item);

				selectDate[0] && (str += selectDate[0].show)
				selectDate[1] && (str += ',' + selectDate[1].show)

				this.selectDate = selectDate
				this.showDateSelector = false
				this.selectorPlaceholder = str
				this.totalPrice = currentPrice * selectDate.length
				this.totalDiscountPrice = currentDiscountPrice * selectDate.length

			},
			generateDateSelectorData() {
				const date = new Date()
				let day,
					weekIndex,
					newBody = [],
					newHeader;

				day = date.getDate()
				weekIndex = date.getDay() + 1 // 明天开始

				// 处理日期头
				const dateSelectorHeader = this.dateSelectorHeader
				newHeader = [...dateSelectorHeader.slice(weekIndex), ...dateSelectorHeader.slice(0, weekIndex)];

				const getDateStr = (someDayCount, isAfterDay = 0) => {
					let y = '',
						m = "",
						d = "",
						dd = "";

					dd = new Date();
					dd.setDate(dd.getDate() + someDayCount); //获取AddDayCount天后的日期 

					y = dd.getFullYear();
					m = dd.getMonth() + 1; //获取当前月份的日期 
					d = dd.getDate() + isAfterDay; // 从第二天开始算
					//判断 月
					m = m < 10 ? "0" + m : m
					//判断 日
					d = d < 10 ? "0" + d : d

					return y + "-" + m + "-" + d;
				}

				for (let i = 0; i < 14; i++) {
					let _yearMonthDay = "",
						_Month = "",
						_day = "",
						show = '';

					_yearMonthDay = getDateStr(i, 1)
					_Month = getDateStr(i, 1).split('-')[1]
					_day = getDateStr(i, 1).split('-')[2]

					show = `${parseInt(_Month)}月${_day}号`

					newBody.push({
						show,
						key: _day,
						checked: false,
						value: _yearMonthDay
					})
				}

				newBody[0].key = "明天"
				newBody[1].key = "后天"

				this.dateSelectorHeader = newHeader
				this.dateSelectorBody = newBody
			},
			handleSelect(e) {
				const {
					dateSelectorBody,
					positionPromotionList
				} = this;

				let selectIndex = e.currentTarget.dataset.gid,
					name = positionPromotionList[selectIndex].name,
					totalPrice = parseInt(positionPromotionList[selectIndex].oldAmounts),
					totalDiscountPrice = parseInt(positionPromotionList[selectIndex].amounts),

					checkedPositionPromotion = {
						name,
						currentPrice: totalPrice,
						currentDiscountPrice: totalDiscountPrice
					}

				dateSelectorBody.forEach(item => item.checked = false)

				this.totalPrice = totalPrice
				this.selectIndex = selectIndex
				this.checkedPositionPromotion = checkedPositionPromotion
				this.totalDiscountPrice = totalDiscountPrice
				this.selectorPlaceholder = '请选择'
				this.dateSelectorBody = dateSelectorBody
			},
			handleDateTrigger() {
				this.showDateSelector = !this.showDateSelector
			},
			handleDateSelect(e) {
				let gid = e.currentTarget.dataset.gid
				const isLimitFn = dateSelectorBody => {
					let limit = false,
						length = 0;
					dateSelectorBody.forEach(item => (item.checked) && ++length)
					length >= 2 && (limit = true)
					return limit
				}
				const dateSelectorBody = this.dateSelectorBody,
					checked = dateSelectorBody[gid].checked;

				// 取消自身选中时
				checked && (dateSelectorBody[gid].checked = false);
				// 选中时
				!isLimitFn(dateSelectorBody) && (dateSelectorBody[gid].checked = !checked)

				this.dateSelectorBody = dateSelectorBody
			},
			handlePurchase() {
				const {
					id,
					selectDate,
					selectIndex,
					checkedPositionPromotion,
					positionPromotionList,
					totalDiscountPrice
				} = this;

				if (!selectDate.length) {
					return uni.showToast({
						title: '请选择升级日期',
						icon: 'none',
						duration: 500
					})
				}

				let value1,
					value2,
					params = {
						// amount: totalDiscountPrice,
						amount: 1,
						type: 1,
						body: `购买${checkedPositionPromotion.name}`,
						pid: id,
					};

				value1 = selectDate[0].value

				if (selectDate.length < 2) { // 选择一天时
					params.s_time = `${value1} 00:00:00,`
					params.e_time = `${value1} 23:59:59,`
				} else { // 选择两天时

					value2 = selectDate[1].value
					if (this.$moment().isContinuity(selectDate[0].value, selectDate[1].value)) { // 选择非连续性日期
						params.s_time = `${value1} 00:00:00,${value1} 23:59:59`
						params.e_time = `${value2} 00:00:00,${value2} 23:59:59`
					} else { // 选择连续性日期
						params.s_time = `${value1} 00:00:00,`
						params.e_time = `${value2} 23:59:59,`
					}
				}

				switch (+positionPromotionList[selectIndex].id) {
					case 1:
						params.type_mode = 2
						break;
					default:
						params.type_mode = 1
						break;
				}

				setWorkPromotion(params).then(res => {
					if (res.code == 1) {
						uni.requestPayment({
							appId: res.data.appId,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							paySign: res.data.paySign,
							signType: res.data.signType,
							timeStamp: res.data.timeStamp,
							success(res) {
								uni.navigateTo({
									delta: 2
								})
							},
							fail(res) {}
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.job-dtl-box {
		padding: 0 30rpx 0;
	}

	.position-promotion {
		padding: 150rpx 0 80rpx 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
	}

	.date-selector-wrap {
		.mask {
			position: fixed;
			top: 0;
			left: 0;
			background: rgba(0, 0, 0, .5);
			width: 100%;
			height: 100%;
			z-index: 110;
		}

		.date-selector-container {
			.date-selector {
				.header {
					height: 120rpx;
				}

				.body {
					margin-top: 30rpx;

					.date-body {
						margin-top: 50rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						flex-wrap: wrap;
						font-size: 26rpx;

						.day-item {
							width: 90rpx;
							margin: 20rpx 0;
							border-radius: 100%;
							background: #f8f8f8;
							height: 90rpx;
							line-height: 90rpx;
							text-align: center;

							&.select {
								background: #E41805;
								color: #ffffff;
							}
						}
					}
				}

				.content {
					position: fixed;
					bottom: 0;
					left: 0;
					background-color: #FFF;
					text-align: center;
					box-sizing: border-box;
					width: 100%;
					height: 45%;
					border-radius: 30rpx 30rpx 0 0;
					z-index: 111;
					padding: 0 30rpx;

					.date-header {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-around;

					}
				}
			}

			.date-selector-trigger {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 60rpx;
				border-bottom: 1px solid rgba(205, 205, 205, .5);
				margin-bottom: 75rpx;

				.trigger {
					font-size: 24rpx;
				}
			}
		}
	}


	.info-item-wrap {
		border: 1px solid #ffffff;
		padding: 40rpx 25px 10px;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 3rpx 39rpx 7rpx rgba(51, 51, 51, 0.06);
		border-radius: 18rpx;

		.info-item {
			font-size: 36rpx;

			.discount-price {
				color: rgba(228, 24, 5, 1);
			}

			.bottom-box {
				padding-top: 15rpx;
			}

			.price {
				color: #CCCCCC;
				font-size: 30rpx;
			}

			.name {
				font-size: 30rpx;
				margin-bottom: 10rpx;
			}
		}

		&.default {
			&.select {
				position: relative;

				&::before {
					position: absolute;
					top: -22rpx;
					left: 22%;
					padding: 5rpx 35rpx 5rpx 35rpx;
					font-size: 24rpx;
					transform: translate(-50%, 0);
					box-sizing: border-box;
					background: #E41805;
					color: #ffffff;
					border-radius: 10rpx;
					display: inline-block;
					content: attr(data-default);
				}
			}
		}

		&.select {
			border: 1px solid #E41805;
		}

		&:nth-child(1) {
			margin-right: 10rpx;
		}

		&:nth-child(2) {
			margin-right: 10rpx;
		}
	}

	.iconxiayibu {
		font-size: 24rpx;
		margin-top: 4rpx;
		margin-left: 15rpx;
	}

	.discription {
		.discription-item {
			color: #999999;
			font-size: 26rpx;
			padding-left: 30rpx;

			&::before {
				position: absolute;
				top: 12rpx;
				left: 0;
				display: block;
				font-size: 10rpx;
				content: '●';
			}
		}
	}


	.occupying {
		height: 120px;
	}

	.confirm-warp {
		box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.08);
		height: 120px;
		background: rgba(255, 255, 255, 1);
		position: fixed;
		bottom: 0;
		padding: 30rpx 40rpx 60rpx 40rpx;
		left: 0;
		box-sizing: border-box;

		.total-box {
			font-size: 36rpx;

			.price {
				color: #CCCCCC;
			}
		}

		.confirm-btn {
			width: 280rpx;
			background-color: #E41805;
			color: #ffffff;

			.total {
				font-size: 36rpx;
			}
		}
	}
</style>
